import { useState } from 'react'
import { toast } from 'react-toastify'

export default function PaymentRequiredModal({ isOpen, onClose }) {
  const [isLoading, setIsLoading] = useState(false)

  if (!isOpen) return null

  const handleUpgrade = () => {
    setIsLoading(true)
    // 打开 Meshy.ai 升级页面
    window.open('https://www.meshy.ai/settings/subscription', '_blank')
    setTimeout(() => {
      setIsLoading(false)
      onClose()
    }, 1000)
  }

  const handleRetryLater = () => {
    toast.info('请稍后再试，免费额度可能会重置')
    onClose()
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="relative w-full max-w-md mx-4">
        {/* 背景模糊效果 */}
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl blur-xl"></div>
        
        {/* 模态框内容 */}
        <div className="relative bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl p-6 shadow-2xl">
          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="absolute top-4 right-4 p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-all"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>

          {/* 图标 */}
          <div className="flex justify-center mb-4">
            <div className="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
              </svg>
            </div>
          </div>

          {/* 标题 */}
          <h2 className="text-2xl font-bold text-white text-center mb-2">
            免费额度已用完
          </h2>
          
          {/* 描述 */}
          <p className="text-gray-300 text-center mb-6 leading-relaxed">
            Meshy.ai 免费计划每月提供 200 次生成，您的额度已用完。
            <br />
            升级到付费计划即可继续使用。
          </p>

          {/* 功能列表 */}
          <div className="bg-white/5 rounded-lg p-4 mb-6">
            <h3 className="text-white font-semibold mb-3 flex items-center gap-2">
              <svg className="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              付费计划优势
            </h3>
            <ul className="space-y-2 text-sm text-gray-300">
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
                无限次 3D 模型生成
              </li>
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
                更快的生成速度
              </li>
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
                更高质量的模型
              </li>
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
                优先技术支持
              </li>
            </ul>
          </div>

          {/* 价格信息 */}
          <div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg p-4 mb-6 border border-blue-500/20">
            <div className="text-center">
              <p className="text-white font-semibold">付费计划价格</p>
              <p className="text-2xl font-bold text-blue-400 mt-1">$0.10 - $0.50</p>
              <p className="text-sm text-gray-400">每次生成</p>
            </div>
          </div>

          {/* 按钮组 */}
          <div className="flex gap-3">
            <button
              onClick={handleUpgrade}
              disabled={isLoading}
              className="flex-1 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {isLoading ? (
                <>
                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  跳转中...
                </>
              ) : (
                <>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  立即升级
                </>
              )}
            </button>
            
            <button
              onClick={handleRetryLater}
              className="px-6 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-all border border-white/20"
            >
              稍后再试
            </button>
          </div>

          {/* 底部提示 */}
          <p className="text-xs text-gray-500 text-center mt-4">
            免费额度通常在每月 1 日重置
          </p>
        </div>
      </div>
    </div>
  )
}
